<template>
	<view class="main">
		<tou_hand1 handtitle='查询用户'></tou_hand1>
		<view class="show">
			<view class="sone">
				<view class="sonehand">
					<input placeholder="用户编号" v-model="userId"/>
					<input placeholder="电卡号(完整卡号)" v-model="cardId"/>
				</view>
				<view class="sonehand" v-if="type==2">
					<input placeholder="姓名" v-model="realName"/>
					<input placeholder="手机号" v-model="phone"/>
				</view>
			</view>
			<view class="sbtn" @click="querybtn">查询</view>
			<!-- <view class="stwo" v-if="type==2">说明 :  电卡号不支持模糊查询，需要输入完整</view> -->
			<view class="sthree" v-if="type==2" @click="typebtn(1)">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//up.png" ></image>
				
			</view>
			<view class="sthree" v-if="type==1" @click="typebtn(2)">
				
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//down.png" ></image>
			</view>
			<view class="sfour">
				<van-cell v-for="(item, index) in showlist" :key="index" >
				<view class="sfourtap" @click="detailbtn(item.id)">
					<view class="sfourhand">用户编号:{{item.id}}</view>
					<view class="sfourhand">姓名:{{item.realName}}</view>
					<view class="sfourhand">注册时间：{{item.createTime}}</view>
					<view class="sfourhand">手机号：{{item.phone}}</view>
				</view>
				</van-cell>
			</view>
			<view style="width: 100%;position: fixed;bottom: 40upx;">
				<view class="sbtn" @click="addbtn" style="margin-bottom: 0upx;">添加用户</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	
	export default {
		components: {tou_hand1},
		mounted() {
			
		},

		data() {
			return {
				type:1,
				projectId:'',//小区ID
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				showlist:[],//列表数据
				cardId:'',//电卡号
				realName:'',//用户姓名
				phone:'',//手机号
				userId:'',//用户编号
			}
		},
		onLoad(options) {
			this.projectId=options.projectId
		},
		onShow() {
			this.showlist=[]
			this.onRefresh();
		},
		methods: {
			// 获取用户管理的小区列表
			loadMore() {
				if (this.refreshing) {
				  this.showlist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					userId:that.userId,
					cardId:that.cardId,
					realName:that.realName,
					phone:that.phone
				}
				that.loading = true;
				that.$base.request1('manager/user/project/list'+'/'+this.projectId, 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							var arr=res.data.rows
							for(var i=0;i<arr.length;i++){
								arr[i].id=that.pad(arr[i].id,8)
							}
							that.showlist = that.showlist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			onRefresh() {
				  // 清空列表数据
				  this.finished = false;
				  this.pageNum=1
				  // 重新加载数据
				  // 将 loading 设置为 true，表示处于加载状态
				  this.loading = true;
				  this.loadMore();
			},
			typebtn(vul){
				this.type=vul
			},
			//跳转添加用户
			addbtn(){
				uni.navigateTo({
						url: '/manager_pages/add_user/add_user?projectId='+this.projectId,
				 });
			},
			//跳转用户详情
			detailbtn(id){
				 uni.navigateTo({
				        url: '/manager_pages/user_detail/user_detail?id='+id,
				 });

			},
			querybtn(){
				this.showlist=[]
				this.onRefresh()
			},
			pad(num, n) {
			  var len = num.toString().length;
			  while(len < n) {
			    num = "0" + num;
			    len++;
			  }
			  return num;
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		// overflow-x: hidden;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		.show{
			width: 100%;
			box-sizing: border-box;
			.sone{
				margin-top: 50upx;
				.sonehand{
					width: 100%;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 0 32upx;
					/deep/.uni-input-placeholder{
						color: #999999;
					}
					input{
						border-bottom: 1upx solid #e5e5e5;
						font-size: 28upx;
						font-family: PingFang SC Regular, PingFang SC Regular-Regular;
						font-weight: 400;
						color: #999999;
						width: 335upx;
						padding: 10upx 0;
						margin-top: 20upx;
						// padding-left: 10upx;
					}
				}
			}
			.sbtn{
				width: 686upx;
				height: 88upx;
				border-radius: 8upx;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				background-color: #4B98ED;
				margin: 30upx auto;
				line-height: 88upx;
			}
			.stwo{
				width: 100%;
				font-size: 24upx;
				font-family: PingFang SC Regular, PingFang SC Regular-Regular;
				font-weight: 400;
				color: #666666;
				padding-left: 29upx;
			}
			.sthree{
				width: 100%;
				margin: 20upx 0;
				image{
					width: 22upx;
					height: 13upx;
				}
				text-align: center;
			}
			.sfour{
				width: 100%;
				.sfourtap{
					width: 683upx;
					height: 198upx;
					border-radius: 16upx;
					box-shadow: -1upx 5upx 10upx 0upx rgba(22,22,22,0.36); 
					margin: 10upx auto;
					box-sizing: border-box;
					padding: 23upx;
					.sfourhand{
						font-size: 28upx;
						font-family: PingFang SC Regular, PingFang SC Regular-Regular;
						font-weight: 400;
						color: #333333;
						line-height: 40upx;
					}
				}
			}
			
		
		}
		
	}
</style>
